<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui"
    />
    <meta name="format-detection" content="telephone=no" />
    <!-- bug 不能加混合请求头 -->
    <!-- <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    /> -->
    <link rel="stylesheet" href="/static/css/reset.css" />
    <title>H5Web阅读器</title>
    <style type="text/css">
      html {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
      }

      body {
        text-align: left;
        width: 100%;
        -webkit-tap-highlight-color: rgba(0,0,0,.05);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
        overflow: hidden;
        background: #e9dfc7;
      }

      .container {
        height: 100vh;
        overflow-y: scroll;
      }

      .m-read-content {
        /*文章内容区*/
        font-size: 14px;
        color: #555;
        line-height: 31px;
        padding: 15px;
      }

      .m-read-content h4 {
        font-size: 20px;
        color: #736357;
        border-bottom: solid 1px #736357;
        letter-spacing: 2px;
        margin: 0 0 1em 0;
      }

      .m-read-content p {
        text-indent: 2em;
        margin: 0.5em 0;
        letter-spacing: 0px;
        line-height: 24px;
      }

      .u-tab {
        height: 34px;
        margin: 10px auto;
        line-height: 34px;
        border-radius: 8px;
        border: 1px solid #858382;
        font-size: 12px;
        background: #000;
        /*透明度*/
        opacity: 0.9;
      }

      .u-tab li {
        /*中间白线*/
        display: inline-block;
        width: 49%;
        border-right: 1px solid #858382;
        text-align: center;
        color: #fff;
      }

      .u-tab li:nth-child(2) {
        /*去掉右边的白线*/
        border-right: none;
      }

      .m-button-bar {
        /*按钮大小*/
        text-align: center;
        font-size: 14px;
        padding: 5px;
        margin: 10px;
        width: 70%;
        max-width: 800px;
        padding: 5px;
        margin: 0 auto;
      }

      .top-nav {
        /*顶部导航*/
        position: fixed;
        top: 0px;
        height: 50px;
        width: 100%;
        z-index: 9999;
        background: #000;
      }

      .icon-back {
        /*返回图标样式*/
        position: absolute;
        top: 14px;
        left: 10px;
        width: 23px;
        height: 23px;
        background: url();
        background-size: contain;
      }

      .nav-title {
        /*顶部标题返回书架*/
        position: absolute;
        top: 16px;
        left: 42px;
        color: #d5d5d6;
      }

      .bottom-nav-bk {
        /*底部面板背景*/
        position: fixed;
        bottom: 0px;
        height: 70px;
        background: #000;
        width: 100%;
        opacity: 0.9;
        z-index: 10004;
      }

      .bottom-nav {
        /*底部菜单*/
        position: fixed;
        bottom: 0px;
        height: 70px;
        background: none;
        width: 100%;
        opacity: 1;
        z-index: 10004;
        margin: 0 auto;
        text-align: center;
      }

      .bottom-nav .item {
        display: inline-block;
        width: 32%;
        color: #fff;
        text-align: center;
        margin: 0 auto;
      }

      .icon-text {
        position: absolute;
        top: 25px;
        font-size: 10px;
      }

      .icon-dir,
      .icon-font,
      .icon-night,
      .icon-day {
        position: absolute;
        top: 3px;
        left: 2px;
        width: 18px;
        height: 13px;
        background: url();
        background-size: contain;
      }

      .icon-night,
      .icon-day,
      .icon-font {
        left: 1px;
      }

      .icon-font {
        width: 20px;
        height: 13px;
        background: url();
        background-size: contain;
      }

      .current .icon-font {
        top: 2px;
        left: 0px;
        width: 22px;
        height: 15px;
        background: url();
        background-size: contain;
      }

      .icon-day {
        width: 19px;
        height: 18px;
        background: url();
        background-size: contain;
      }

      .icon-night {
        left: 4px;
        width: 16px;
        height: 16px;
        background: url();
        background-size: contain;
      }

      .item-warp {
        width: 26px;
        margin: 0 auto;
        position: relative;
      }

      .loading {
        position: fixed;
        width: 100%;
        text-align: center;
        top: 40%;
        color: #fff;
        z-index: 9999;
      }

      .loading-icon {
        margin: 0 auto;
        margin-top: 50%;
        background: url();
        width: 20px;
        height: 20px;
      }
      .loading-mask {
        width: 100%;
        height: 100%;
        text-align: center;
        margin: 0 auto;
        background: #000;
        position: fixed;
        top: 0;
        opacity: .2;
      }

      .nav-pannel-bk {
        position: fixed;
        bottom: 70px;
        height: 135px;
        width: 100%;
        background: #000;
        opacity: 0.9;
        z-index: 10000;
      }

      .nav-pannel {
        /*导航面板*/
        position: fixed;
        bottom: 70px;
        height: 135px;
        width: 100%;
        background: none;
        color: #fff;
        z-index: 10000;
      }

      .nav-pannel .bk-container {
        position: relative;
        height: 30px;
        width: 30px;
        background: #fff;
        border-radius: 15px;
        display: inline-block;
        vertical-align: -14px;
        margin-left: 10px;
      }

      .child-mod {
        padding: 5px 10px;
        margin: 15px;
      }

      .child-mod span {
        display: inline-block;
        padding-right: 20px;
        padding-left: 10px;
      }

      .font-size-button {
        background: none;
        border: 1px #8c8c8c solid;
        color: #fff;
        border-radius: 16px;
        padding: 5px 40px;
      }

      .child-mod button:nth-child(2) {
        margin-right: 10px;
      }

      .bk-container {
        /*里圆圈*/
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background: #fff;
        display: inline-block;
        vertical-align: -14px;
      }

      .bk-container-current {
        /*外圆圈*/
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        border: 1px #ff7800 solid;
        display: inline-block;
        top: -2px;
        left: -2px;
      }

      .bk-container2 {
        /*里圆圈*/
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background: #86c3e6;
        display: inline-block;
        vertical-align: -14px;
      }

      .bk-container-color2 {
        /*外圆圈*/
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        border: 1px #fff solid;
        display: inline-block;
        top: -2px;
        left: -2px;
      }

      .artical-action-mid {
        /**/
        position: fixed;
        z-index: 10002;
        width: 100%;
        height: 40%;
        top: 30%;
      }
    </style>
  </head>

  <body>
    <div class="loading-mask" id="init_loading">
      <div class="loading-icon" style="display:none;"></div>
    </div>

    <div id="root" class="container">
      <div class="m-artical-actioin">
        <div class="artical-action-mid" id="action_mid"></div>
      </div>

      <div id="top_nav" class="top-nav" style="display:none">
        <div class="icon-back"></div>
        <div class="nav-title">返回书架</div>
      </div>

      <div id="fiction_chapter_title"></div>

      <div id="fiction_container" class="m-read-content">
        <!-- 动态添加的数据 -->
      </div>

      <div class="m-button-bar" id="bottom-tool_bar">
        <ul class="u-tab">
          <li id="prev_button">上一章</li>
          <li id="next_button">下一章</li>
        </ul>
      </div>

      <div class="nav-pannel-bk font-container" style="display:none"></div>

      <div
        class="nav-pannel font-container"
        id="font-container"
        style="display:none"
      >
        <div class="child-mod">
          <span>字号</span>
          <button id="large-font" class="font-size-button">大</button>
          <button id="small-font" class="font-size-button">小</button>
        </div>
        <div class="child-mod">
          <span>背景</span>
          <div
            class="bk-container"
            id="undefined"
            data-font=""
            data-bottomcolor="undefined"
            data-color="#f7eee5"
            style="background-color:#f7eee5"
          >
            <div class="bk-container-current" style="display: none;"></div>
            <span style="display:none">米白</span>
          </div>

          <div
            class="bk-container"
            id="font_normal"
            data-font=""
            data-bottomcolor="undefined"
            data-color="#e9dfc7"
            style="background-color:#e9dfc7"
          >
            <div class="bk-container-current"></div>
            <span style="display:none">纸张</span>
          </div>

          <div
            class="bk-container"
            id="undefined2"
            data-font=""
            data-bottomcolor="undefined"
            data-color="#cdefce"
            style="background-color:#cdefce"
          >
            <div class="bk-container-current" style="display: none;"></div>
            <span style="display:none">护眼</span>
          </div>
        </div>
      </div>

      <div class="bottom-nav-bk bottom_nav" style="display:none"></div>

      <div class="bottom-nav bottom_nav" style="display:none">
        <div class="item menu-button" id="menu_button">
          <div class="item-warp">
            <div class="icon-dir"></div>
            <div class="icon-text">目录</div>
          </div>
        </div>

        <div class="item current" id="font-button">
          <div class="item-warp">
            <div class="icon-font"></div>
            <div class="icon-text">字体</div>
          </div>
        </div>

        <div class="item" id="night-button">
          <div class="item-warp" id="day_icon" style="display:none;">
            <div class="icon-day"></div>
            <div class="icon-text">白天</div>
          </div>
          <div class="item-warp" id="night_icon">
            <div class="icon-night"></div>
            <div class="icon-text">夜间</div>
          </div>
        </div>
      </div>

      <div class="loading" id="loading" style="display:none;">正在加载中...</div>
      <div class="m-tool-bar-mask" id="tool_bar_mask"></div>
      <ul class="menu-container chapter-list" id="menu_container"></ul>
      <div class="menu-mask" id="menu_mask"></div>
      <div class="mask" id="mask"></div>
    </div>
    <script src="/static/script/zepto.js"></script>
    <script>
      window.jQuery = $
    </script>
    <script src="/static/script/jquery.base64.js"></script>
    <script src="/static/script/jquery.jsonp.js"></script>
    <script>
      ;(function() {
        'use strict' //使用es6标准特性
        var Util = (function() {
          var prefix = 'html5_reader_'
          var StorageGetter = function(key) {
            return localStorage.getItem(prefix + key)
            //todo 记忆当前章节数
          }

          var StorageSetter = function(key, val) {
            return localStorage.setItem(prefix + key, val)
          }

          var getBSONP = function(url, callback) {
            return $.jsonp({
              url: url,
              cache: true,
              callback: 'duokan_fiction_chapter',
              success: function(result) {
                var data = $.base64.decode(result)
                var json = decodeURIComponent(escape(data))
                callback(json)
              },
              error: function(err) {
                console.log(err)
              }
            })
          }
          return {
            getBSONP: getBSONP,
            StorageGetter: StorageGetter,
            StorageSetter: StorageSetter
          }
        })()

        var Dom = {
          top_nav: $('#top_nav'),
          bottom_nav: $('.bottom_nav'),
          font_container: $('.font-container'),
          font_button: $('#font-button'),
          bk_container: $('#bk-container')
        }

        var Win = $(window)
        var Doc = $(document)
        var RootContainer = $('#fiction_container') //容器
        //记忆字体大小
        var initFontSize = Util.StorageGetter('font-size')
        initFontSize = parseInt(initFontSize)
        var readerModel
        var readerUI

        if (!initFontSize) {
          initFontSize = 14
        }
        RootContainer.css('font-size', initFontSize)

        //记录当前章节数
        var initCurrentChapter = Util.StorageGetter('chapter_id')
        initCurrentChapter = parseInt(initCurrentChapter)
        if (!initCurrentChapter) {
          initCurrentChapter = 1
        }

        function main() {
          //todo 程序入口函数
          readerModel = ReaderModel()
          readerUI = ReaderBaseFrame(RootContainer)
          readerModel.init(function(data) {
            readerUI(data)
          })
          EventHandler()
        }

        //实现和阅读器相关的数据交互方法
        function ReaderModel() {
          //todo 实现和阅读器相关的数据交互方法
          var Chapter_id
          //  var Chapters = [];    //没用,自己加的
          var ChaptersTotal
          var init = function(UIcallback) {
            getFictionInfoPromise()
              .then(function() {
                $('#init_loading').show()
                $('#loading').show()
                return getCurchapterContentPromise()
              })
              .then(function(resp) {
                console.log('TCL: init -> resp', resp)
                $('#init_loading').hide()
                $('#loading').hide()
                if (resp.code == 200) {
                  UIcallback && UIcallback(resp.data)
                } else {
                  console.log(resp)
                }
              })
          }

          //使用Promise异步编程解决方案
          var getFictionInfoPromise = function() {
            return new Promise(function(resolve, reject) {
              $.get(
                'ajax/chapter',
                function(data) {
                  //todo 获得章节信息之后的回调
                  if (data.result == 0) {
                    if (Chapter_id == null) {
                      Chapter_id = data.chapters[1].chapter_id //???chapters哪里来的
                      // 从json数据里读出来的——来自2018年10月29号复看的回复
                    }
                    ChaptersTotal = data.chapters.length //有效果的，只是提供的文件少,从章节目录中可以得到最大章节数
                    console.log(data)
                    resolve({
                      code: 200,
                      data: data,
                      msg: 'success'
                    })
                  } else {
                    reject({
                      code: 404,
                      data: {},
                      msg: 'fail'
                    })
                  }
                },
                'json'
              )
            })
          }

          //todo章节跳转
          var gotoChapter = function(chapter_id) {
            Chapter_id = chapter_id
            getCurchapterContent()
          }

          //获得章节的内容
          var getCurchapterContent = async function(initCurrentChapter) {
            // 标记是否还有获取到数据
            return new Promise((resolve, reject) => {
              $.get(
                'ajax/chapter_data',
                {
                  id: initCurrentChapter
                },
                function(data) {
                  if (data.result == 0) {
                    var url = data.jsonp
                    Util.getBSONP(url, function(data) {
                      console.log('getbsonp',JSON.parse(data).t)
                      if (data) {
                        resolve(data)
                      } else {
                        reject('获取章节内容失败')
                      }
                    })
                  }
                },
                'json'
              )
            })
          }

          //使用Promise异步编程解决方案
          var getCurchapterContentPromise = function() {
            return new Promise(function(resolve, reject) {
              $.get(
                'ajax/chapter_data',
                {
                  id: initCurrentChapter
                },
                function(data) {
                  if (data.result == 0) {
                    var url = data.jsonp
                    Util.getBSONP(url, function(data) {
                      //  callback && callback(data);
                      resolve({
                        code: 200,
                        data: data,
                        msg: 'success'
                      })
                    })
                  } else {
                    reject({
                      code: 404,
                      data: {},
                      msg: 'fail'
                    })
                  }
                },
                'json'
              )
            })
          }

          //上翻页
          var prevChapter = function(UIcallback) {
            if (initCurrentChapter == 1) {
              return
            }
            initCurrentChapter -= 1
            Chapter_id = initCurrentChapter
            //更改传入章节变量Chapter_id为initCurrentChapter
            getCurchapterContent(initCurrentChapter).then(
              res => {
                UIcallback(res)
                Util.StorageSetter('chapter_id', initCurrentChapter) //存储当前章节
              },
              err => {
                console.log(err)
              }
            )
          }

          // 下一页
          var nextChapter = function(UIcallback) {
            //  Chapter_id = parseInt(Chapter_id,10); //??什么作用
            if (initCurrentChapter == ChaptersTotal) {
              //总章节数
              return
            }
            initCurrentChapter += 1
            //  Chapter_id =initCurrentChapter;   ////??什么作用
            getCurchapterContent(initCurrentChapter).then(
              res => {
                UIcallback(res)
                Util.StorageSetter('chapter_id', initCurrentChapter)
              },
              err => {
                console.log(err)
              }
            )
          }
          return {
            init: init,
            prevChapter: prevChapter,
            nextChapter: nextChapter
          }
        }

        //渲染基本的UI结构
        function ReaderBaseFrame(container) {
          function parseChapterData(jsonData) {
            var jsonObj = JSON.parse(jsonData)
            var html = '<h4>' + jsonObj.t + '</h4>'
            for (var i = 0; i < jsonObj.p.length; i++) {
              html += '<p>' + jsonObj.p[i] + '</p>'
            }
            return html
          }
          return function(data) {
            container.html(parseChapterData(data))
          }
        }

        //交互事件绑定
        function EventHandler() {
          //todo 交互事件绑定
          //触发底部菜单
          $('#action_mid').click(function() {
            if (Dom.top_nav.css('display') == 'none') {
              Dom.bottom_nav.show()
              Dom.top_nav.show()
            } else {
              Dom.bottom_nav.hide()
              Dom.top_nav.hide()
              Dom.font_button.removeClass('current')
            }
            if (Dom.font_container.css('display') != 'none') {
              Dom.font_container.hide()
              Dom.font_button.removeClass('current')
            }
          })

          Dom.font_button.click(function() {
            if (Dom.font_container.css('display') == 'none') {
              Dom.font_container.show()
              Dom.font_button.addClass('current')
            } else {
              Dom.font_container.hide()
              Dom.font_button.removeClass('current')
            }
          })
          $('#night-button').click(function() {
            //todo 触发背景切换事件
          })

          //设置字体大小
          //增大字体
          $('#large-font').click(function() {
            if (initFontSize > 24) {
              return
            }
            initFontSize += 1
            RootContainer.css('font-size', initFontSize)
            Util.StorageSetter('font-size', initFontSize) //存储字体大小
          })
          //减小字体
          $('#small-font').click(function() {
            if (initFontSize < 13) {
              return
            }
            initFontSize -= 1
            RootContainer.css('font-size', initFontSize)
            Util.StorageSetter('font-size', initFontSize)
          })

          //TODO 设置背景颜色

          //上下翻页
          $('#prev_button').click(function() {
            //TODO 获得章节翻页数据->渲染数据
            readerModel.prevChapter(function(data) {
              readerUI(data)
            })
          })
          // 下一页
          $('#next_button').click(function() {
            readerModel.nextChapter(function(data) {
              readerUI(data)
            })
          })
          Win.scroll(function() {
            Dom.bottom_nav.hide()
            Dom.top_nav.hide()
            Dom.font_container.hide()
            Dom.font_button.removeClass('current')
          })
        }

        main()
      })()
    </script>
  </body>
</html>
